import React from "react";
import { Layout, BackTop } from "antd";
import { Outlet } from "react-router";
import { observer } from "mobx-react";
import { renderRoutes } from "@utils/router.config";
import * as styles from "./index.scss";
import { SdHeader, Footer } from "./../components";
import { useTranslation } from "react-i18next";
const { Content } = Layout;

function BaseLayout(props: any) {
  return (
    <Layout className={styles.sdBaseLayout}>
      <Layout className="site-layout">
        <div
          style={{
            minHeight: "100vh",
            position: "relative",
            paddingBottom: "166px",
            backgroundColor: "#fafafa",
          }}
        >
          <SdHeader />
          <Content>
            <Outlet />
          </Content>
          <Footer />

          <BackTop target={() => document.body} />
        </div>
      </Layout>
    </Layout>
  );
}
export default observer(BaseLayout);
